<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>event_slide_menu</title>
<script src='../lib/jquery-2.1.1.js'></script>
<script>
$(document).ready(function(){
	$('#main1,#main2,#main3').css({
		'background-color':'#ff33dd',
		'border':'5px groove #ff33dd',
		'border-radius':'10px',
		'margin-bottom':'5px',
		'padding':'10px',
		'width':'150px',
		'color':'#ffffff',
		'font-weight':'bold',
		'text-align':'center'
	});
	$('#sub_menu1,#sub_menu2,#sub_menu3').css({
		'color':'#aabbcc',
		'font-family':'고딕',
		'background-color':'#ddffee',
		'border':'5px groove #ff5588',
		'padding':'10px',
		'width':'150px',
		'margin-bottom':'5px',
		'border-radius':'10px',
		'text-align':'center'
		
		
	});
	
	$('#main1').click(function(){
		$('#sub_menu1').slideToggle('slow',function(){
			if($(this).is(':hidden')){
				$('#main1').css('background-color','#ff33dd');
			}else{
				$('#main1').css('background-color','#dddddd');
				$('#main3').css('background-color','#ff33dd');
				$('#main2').css('background-color','#ff33dd');
			}
		});
		$('#sub_menu2').hide();
		$('#sub_menu3').hide();
		
	});
	$('#main2').click(function(){
		$('#sub_menu2').slideToggle('slow',function(){
			if($(this).is(':hidden')){
				$('#main2').css('background-color','#ff33dd');
			}else{
				$('#main2').css('background-color','#dddddd');
				$('#main1').css('background-color','#ff33dd');
				$('#main3').css('background-color','#ff33dd');
			}
			
		});
		$('#sub_menu1').hide();
		$('#sub_menu3').hide();
		
	});
	$('#main3').click(function(){
		$('#sub_menu3').slideToggle(500,function(){
			if($(this).is(':hidden')){
				$('#main3').css('background-color','#ff33dd');
			}else{
				$('#main3').css('background-color','#dddddd');
				$('#main1').css('background-color','#ff33dd');
				$('#main2').css('background-color','#ff33dd');
			}
		});
		$('#sub_menu1').hide();
		$('#sub_menu2').hide();
		
	});
	
});
</script>
</head>
<body>

	<div id='main1'>4조</div>
	<div id='sub_menu1'>
		이미선<p/>
		류지훈<p/>
		임진규<p/>
		양지재<p/>
		정인교<p/>
		장세훈<p/>
	</div>	



	<div id='main2'>1조</div>
	<div id='sub_menu2'>
		이미선<p/>
		류지훈<p/>
		임진규<p/>
		양지재<p/>
		정인교<p/>
		장세훈<p/>
	</div>
	
	<div id='main3'>2조</div>
	<div id='sub_menu3'>
		송태진<p/>
		조민규<p/>
		김준태<p/>
		김준태아가<p/>
		김종민<p/>
	</div>





</body>
</html>